<template>
  <div>
    <!-- 板块页面的顶部导航 -->
    <van-nav-bar fixed @click-left="openLeftPopup" @click-right="openTopPopup_list" class="headers">
      <template #left>
        <van-icon name="user-circle-o" size="22" />
      </template>
      <template #title>
        <van-dropdown-menu>
          <van-dropdown-item v-model="fatherSection" :options="Psections" @change="selectFsection" @open="closeTopPopup" />
        </van-dropdown-menu>
      </template>
      <template #right>
        <van-icon name="bars" size="22" />
      </template>
    </van-nav-bar>
    <van-popup
      v-model="$store.state.pageControl.topPopupShow_list"
      position="top"
      :overlay="false"
      round
      :style="{ width: '100%',top: '7%' }"
    >
      <van-list>
        <van-cell
          v-for="item in sectionlist"
          :key="item.index"
          :title="item.text"
          @click="selectsection(item)"
        />
      </van-list>
    </van-popup>
    <!-- 
        板块板块的主体内容
        1.板块的头部，包含板块的封面，描述，被浏览数目，被关注数目，
        如果登录显示 关注按钮 未登录不显示
        2.板块的置顶帖，热门贴，精华帖等等
        3.板块的帖子预览
    -->
    <div class="main-container">
      <!-- 板块的板块描述 -->
      <van-row class="forum-header" fixed align="center">
        <van-col span="8">
          <van-image class="forum-thumb" :src="sectionInfo.image" round width="100" height="100"></van-image>
        </van-col>
        <van-col span="10">
          <h1>{{sectionInfo.name}}</h1>
          <span>帖子 {{sectionInfo.topiccount}}</span>
          <span>关注 {{sectionInfo.focuscount}}</span>
        </van-col>
        <van-col span="6" class="button" v-if="$store.getters.isAuthenticated">
          <van-button size="small">关注</van-button>
        </van-col>
      </van-row>
      <goods-section v-if="fatherSection===1"></goods-section>
      <leave-message v-else-if="fatherSection===6"></leave-message>
      <forum-section v-else-if="fatherSection===9"></forum-section>
      <lost-find-section v-else-if="fatherSection===10"></lost-find-section>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import TopTopic from './base/TopTopic'
import ForumSection from './sectionContent/ForumSection'
import GoodsSection from './sectionContent/GoodsSection'
import LeaveMessage from './sectionContent/LeaveMessage'
import LostFindSection from './sectionContent/LostFindSection'
export default {
  name: 'Forum',
  data() {
    return {
      currentSection:Number(this.$route.query.csection || this.$route.query.fsection || 1),
      fatherSection:Number(this.$route.query.fsection),
      active: ''
    }
  },
  methods: {
    ...mapMutations(['openLeftPopup', 'openTopPopup_list', 'closeTopPopup']),
    selectsection(section) {
      this.currentSection = section.value
      this.closeTopPopup()
    },
    selectFsection(){
      this.currentSection = this.fatherSection
    }
  },
  computed: {
    ...mapState(['pageControl']),
    Psections() {
      var Psections = []
      for (var i in this.pageControl.sectionlist) {
        if (this.pageControl.sectionlist[i].fsection === null) {
          Psections.push({
            text: this.pageControl.sectionlist[i].name,
            value: this.pageControl.sectionlist[i].id
          })
        }
      }
      return Psections
    },
    sectionlist() {
      var sectionlist = []
      for (var i in this.pageControl.sectionlist) {
        if (this.pageControl.sectionlist[i].fsection === this.fatherSection ) {
          sectionlist.push({
            text: this.pageControl.sectionlist[i].name,
            value: this.pageControl.sectionlist[i].id
          })
        }
      }
      return sectionlist
    },
    sectionInfo() {
      var result  = {}
      for (var i in this.pageControl.sectionlist) {
        if (this.pageControl.sectionlist[i].id === this.currentSection) {
          this.fatherSection = this.pageControl.sectionlist[i].fsection || this.pageControl.sectionlist[i].id
          result = this.pageControl.sectionlist[i]
        }
      }
      return result
    }
  },
  components: {
    GoodsSection,
    ForumSection,
    LeaveMessage,
    LostFindSection,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.forum-header {
  height: 20%;
  padding: 5px 20px;
  background-color: #fff;
  border-radius: 20px;
}
.forum-header span {
  margin: auto 10px;
}

.forum-header .button {
  position: relative;
  top: 30px;
  left: 10px;
}

</style>
<style>
.van-list {
  background-color: white;
  margin: 5px auto;
  padding: 5px 20px;
  border-radius: 20px;
}
</style>